<template>
    <div class="left">
        <!--check-->
        <div class="check">
            <el-checkbox v-model="checkShowHave"
                @change="handleCheckShowHave">仅显示已有的设备</el-checkbox>
        </div>
        <!-- 系统树 -->
        <div class="tree-content">
            <el-tree ref="refTree"
                :data="systemTreeDatas"
                default-expand-all
                :props="defaultProps"
                :filter-node-method="filterNode"
                @node-click="handleTreeNodeClick"></el-tree>
        </div>
        <!-- 按钮-->
        <div class="button"
            @click="onClickButtonAddEquip">
            <button>添加设备类型</button>
        </div>
    </div>

    <!--添加设备的对话框-->
    <div class="adddialog">
        <el-dialog v-model="DialogShow"
            title="添加设备"
            width="30%"
            height="80%"
            align-center>
            <!--中间的表单-->
            <div class="ep-type">
                <el-row :gutter="24">
                    <el-col :span="12"
                        style="padding-left:12px;padding-top: 0px;max-width: 24%;">
                        <span class="real-type">设备类型：</span>
                    </el-col>
                    <el-col :span="12">
                        <el-input v-model="equipmentreal"
                            class="real-input"
                            placeholder="组合设备"
                            size="default"
                            @input="handleEquipmentInput"></el-input>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12"
                        style="padding-left:12px;padding-top: 7px;max-width: 24%;">
                        <span class="refer-type">设备类型参考：</span>
                    </el-col>
                    <el-col :span="12"
                        style="padding-left:12px;padding-top: 5px;">
                        <el-select v-model="equipmentrefer"
                            class="refer-option"
                            @change="handleEquipmentReferSelect">
                            <el-option :label="组合设备"></el-option>
                        </el-select>
                    </el-col>

                </el-row>

            </div>

            <!--设备参数显示表-->
            <div class="ep-table">
                <div><br></div>
                <div class="table-title">设备参数显示</div>
                <div><br></div>
                <div class="table">
                    <el-table :data="tableData"
                        style="width:100%"
                        max-height="300"
                        border>
                        <el-table-column v-for="(item,i) in tableCol"
                            fixed
                            :key="i"
                            :prop="item.prop"
                            :label="item.label"
                            :width="item.width"></el-table-column>
                        <el-table-column type="selection"
                            label="是否显示"
                            width="90"></el-table-column>
                    </el-table>
                </div>
            </div>
            <!--按钮-->
            <el-space>
                <div><br></div>
                <div class="epbutton">
                    <el-button class="btok"
                        @click="onEquipMentDlgClickOK">确定</el-button>
                    <el-button class="btcancle"
                        @click="onEquipmentDlgClickCancle">取消</el-button>
                </div>
            </el-space>

        </el-dialog>
    </div>

</template>

<script setup>
import { getTreeNodeToTableHeaderInfor } from '@/apis/EquipmentInfor'
// import { sendMsgToGetPrimarySubstationEquipment } from '@/utils/Interaction'
import { defineEmits, defineProps, getCurrentInstance, onMounted, ref, watch } from 'vue'
import bus from '../../utils/EventBus'

//当前组件的ref
const currefs = getCurrentInstance()

// 是否显示已有设备
const checkShowHave = ref(false)

// checkShowHave的change事件
const refTree = ref('')

//监测 显示已有设备的checkbox
watch(
  checkShowHave,
  (checkShowHave, oldcheck) => {
    if (currefs.ctx.$refs.refTree) {
      currefs.ctx.$refs.refTree.filter(checkShowHave)
      console.log('树节点筛选成功')
    }
  },
  { deep: true }
)

const handleCheckShowHave = () => {
  // currefs.ctx.$refs.refTree.filter(checkShowHave)

  console.log('data', systemTreeDatas.value)
}

// 是否显示添加设备对话框
const DialogShow = ref(false)

//设备的绑定值
const equipmentreal = ref('')
//设备名称输入事件
const handleEquipmentInput = () => {
  console.log('handleEquipmentInput' + equipmentreal.value)
}
//参照设备绑定值
const equipmentrefer = ref('')
//参照设备下拉事件
const handleEquipmentReferSelect = () => {
  console.log('handleEquipmentReferSelect' + equipmentrefer.value)
}
//设备界面确定按钮的点击事件
const onEquipMentDlgClickOK = () => {
  DialogShow.value = false
  console.log('add_OK')
}
//设备界面取消按钮的点击事件
const onEquipmentDlgClickCancle = () => {
  DialogShow.value = false
  console.log('add_cancle')
}

//设备参数表头
const tableCol = ref([
  {
    prop: 'paramter',
    label: '设备参数',
    width: '150'
  },
  {
    prop: 'unit',
    label: '单位',
    width: '150'
  }
])
// 设备参数数据
const tableData = ref([
  {
    paramter: '1',
    unit: '1'
  },
  {
    paramter: '2',
    unit: '2'
  },
  {
    paramter: '2',
    unit: '2'
  }
])

// props
const props = defineProps({
  systemTreeDatas: { type: Array, default: [], require: 1 }
})

// emit
const emit = defineEmits(['ChangeTreeSystemData'])

// 树的属性映射配置
const defaultProps = ref({
  children: 'children',
  label: 'name'
})

// 添加设备按钮的点击事件
const onClickButtonAddEquip = () => {
  DialogShow.value = true
  console.log('添加设备')
}

//树节点点击事件
const handleTreeNodeClick = (node, data) => {
  console.log('当前节点数据：', node.name)

  const tempData = getTreeNodeToTableHeaderInfor(node.name)
  console.log('tableData:', tempData)

  bus.emit('treeNodeClick', node.name)
}

const filterNode = (value, data) => {
  console.log('data:', data.value)
  console.log('data.excite', data.excite ? 'shi' : 'fou')
  if (!value) return true
  return data.excite == value
}

// 获取树节点数据
const TreeNodeList = () => {}

onMounted(() => {
  console.log(checkShowHave.value ? '是' : '否')
  console.log('data', props.systemTreeDatas)
})
</script>

<style lang="scss">
.table {
  //改变table表里的checkbox的样式，注意style中要添加scoped，否则将变成全局的改变
  .el-table .el-table__header-wrapper .el-table-column--selection .el-checkbox__input {
    display: none;
  }
  .el-table .el-table__header-wrapper .el-table-column--selection .cell {
    &::after {
      content: '是否显示';
    }
  }
}

.left {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  position: relative;

  .button {
    position: absolute;
    bottom: 0;
    left: 20px;
    width: 230px;
  }
}
.adddialog {
  display: flex;
  flex-direction: column;
  position: relative;
  .ep-type {
    .real-type {
      width: 100px;
    }
    .real-input {
      width: 200px;
    }
    .refer-type {
      width: 100px;
    }
    .refer-option {
      width: 200px;
    }
  }
  .epbutton {
    position: relative;
    bottom: 0;
    .btok {
      position: relative;
      left: 380px;
      bottom: 0;
    }
    .btcancle {
      position: relative;
      left: 390px;
      bottom: 0;
    }
  }
}
</style>